window.addEventListener('load', function () {
    // 1.获取元素
    var focus = this.document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 获取focus的宽度
    var w = focus.offsetWidth;
    // 2.利用定时器自动轮播图片
    var index = 0;  // 控制图片轮播的索引
    var flag = false;   // 判断用户是否拖动ul，如果根本没有拖动就不需要判断拖动的距离这些了
    var timer = this.setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';    // 给图片的切换添加C3的过渡效果
        ul.style.transform = 'translateX(' + translatex + 'px)';    // 图片的切换使用C3的移动即可
    }, 2000)
    // 图片切换之后还应该判断下是否到了最后一张图片了，如果是就需要进行无缝衔接轮播了
    // 无缝轮播需要等到我们的过渡完成之后再去判断，监听过渡完成的事件是 transitionend
    ul.addEventListener('transitionend', function () {
        // 判断index索引的值如果等于3则到了最后一张图片了
        if (index >= 3) {    // 这是图片往左走的情况
            index = 0;
            // 去掉过渡效果，这样让我们的ul快速跳到目标位置
            ul.style.transition = 'none';
            // 然后利用我们最新的索引号index乘以宽度去滚动图片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {     // 这是图片往右走的情况
            index = 2;  // 索引为2就是最后一张图的位置
            // 去掉过渡效果，这样让我们的ul快速跳到目标位置
            ul.style.transition = 'none';
            // 然后利用我们最新的索引号index乘以宽度去滚动图片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 3.小圆点跟随变化
        // (1)把ol里面li带有current类名的选出来去掉类名 classList.remove()
        ol.querySelector('.current').classList.remove('current');
        // (2)让当前索引号的li添加上current的类名 classList.add()
        ol.children[index].classList.add('current');
    })

    // 4.手指拖动轮播图
    // 手指触摸获取手指初始坐标
    var startX = 0;
    var moveX = 0;  // 后面需要使用到这个手指移动距离所以定义全局变量来保存
    ul.addEventListener('touchstart', function (e) {
        // 手指触摸获取手指初始坐标
        startX = e.targetTouches[0].pageX;
        // 手指触摸ul时就停止定时器
        clearInterval(timer);
    })
    ul.addEventListener('touchmove', function (e) {
        // 手指滑动就获取到滑动的距离然后让ul移动相应距离
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动ul：ul原来的位置加上手指移动的距离
        var translatex = -index * w + moveX;
        // 手指移动的时候不需要过渡效果所以要取消掉
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        e.preventDefault();     // 阻止屏幕滚动的默认行为，阻止此方法的屏幕翻页效果

        flag = true;    // 用户拖动了把flag改为true才去判断用户拖动的值
    })
    // 手指离开事件：根据用户拖动的距离判断是否需要切换图片
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            // (1)如果移动距离大于50px才执行切换图片
            if (Math.abs(moveX) > 50) {
                // 若判断用户是右滑moveX是正值则播放上一张
                if (moveX > 0) {
                    index--;
                } else {
                    // 若判断用户是左滑moveX是负值则播放下一张
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // (2)如果移动距离小于50px就回弹
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
            // 手指离开ul开启定时器
            clearInterval(timer);  // 要开启定时器之前先清除一下定时器，保证只有一个定时器在运行
            // 重新打开定时器
            timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';    // 给图片的切换添加C3的过渡效果
            ul.style.transform = 'translateX(' + translatex + 'px)';    // 图片的切换使用C3的移动即可
        }, 2000)
    }
  
    })

    // 返回顶部模块功能实现
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function () {
        window.scroll(0, 0);
    })
})